<template>
  <div class="base_component">
    <component
      :is="component"
      :tasksConfig="tasksConfig"
      :layer="layer"
      :data="formData"
      :ref="layer.component"
    ></component>
  </div>
</template>
<script>
import { Bus } from "../../../../utils/index";
export default {
  data() {
    return { component: null, formData: {} };
  },
  props: {
    tasksConfig: {
      type: Object,
      default() {
        return {};
      },
    },
    layer: {
      type: Object,
      default() {
        return {};
      },
    },
    nodeId: {
      type: String,
      default() {
        return "Home";
      },
    },
  },
  created() {
    Bus.$on("reloadInitData", this.reloadInitData);
    Bus.$on("submitHandle", this.submitHandle);
    Bus.$on("saveHandle", this.saveHandle);
    Bus.$on("cancelHandle", this.cancelHandle);
    Bus.$on("goBackHandle", this.goBackHandle);
    Bus.$on("deleteHandle", this.deleteHandle);
    Bus.$on("searchHandle", this.searchHandle);
    this.getComponentTemplate()
      .then(() => {
        this.reloadInitData();
      })
      .catch((err) => {
        console.log(err);
      })
      .finally(() => {});
  },
  destroyed() {
    Bus.$off("reloadInitData");
    Bus.$off("submitHandle");
    Bus.$off("saveHandle");
    Bus.$off("cancelHandle");
    Bus.$off("goBackHandle");
    Bus.$off("deleteHandle");
    Bus.$off("searchHandle");
  },
  methods: {
    searchHandle(v) {
      let ref = this.$refs[this.layer.component];
      let formData = ref.submitComponentData && ref.submitComponentData();
      if (ref.verifiedData()) {
        this.$store
          .dispatch("searchFormData", { ...formData })
          .then((res) => {
            this.reloadInitData();
          })
          .catch((err) => console.log(err))
          .finally(() => {});
      }
    },
    goBackHandle() {
      this.$router.back();
    },
    deleteHandle() {
      let ref = this.$refs[this.layer.component];
      let formData = ref.submitComponentData && ref.submitComponentData();
      if (ref.verifiedData()) {
        this.$store
          .dispatch("deleteFormData", { ...formData })
          .then((res) => {
            this.reloadInitData();
          })
          .catch((err) => console.log(err))
          .finally(() => {});
      }
    },
    cancelHandle() {
      let ref = this.$refs[this.layer.component];
      let formData = ref.submitComponentData && ref.submitComponentData();
      if (ref.verifiedData()) {
        this.$store
          .dispatch("cancelFormData", { ...formData })
          .then((res) => {
            this.reloadInitData();
          })
          .catch((err) => console.log(err))
          .finally(() => {});
      }
    },
    saveHandle() {
      let ref = this.$refs[this.layer.component];
      let formData = ref.submitComponentData && ref.submitComponentData();
      if (ref.verifiedData()) {
        this.$store
          .dispatch("saveFormData", { ...formData })
          .then((res) => {
            this.reloadInitData();
          })
          .catch((err) => console.log(err))
          .finally(() => {});
      }
    },
    submitHandle() {
      let ref = this.$refs[this.layer.component];
      let formData = ref.submitComponentData && ref.submitComponentData();
      if (ref.verifiedData()) {
        this.$store
          .dispatch("submitFormData", { ...formData })
          .then((res) => {})
          .catch((err) => console.log(err))
          .finally(() => {});
      }
    },
    reloadInitData() {
      this.$store
        .dispatch("getNodeBaseComponentInitData", {
          nodeId: this.$props.nodeId,
          component: this.layer.component,
        })
        .then((res) => {
          this.$refs[this.layer.component].getComponentData &&
            this.$refs[this.layer.component].getComponentData(res);
          this.formData = res;
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {});
    },
    getComponentTemplate() {
      return new Promise((resolve, reject) => {
        try {
          const component = this.layer.component;
          this.component = () =>
            import("../../../business/" + component + "/" + component);
          resolve();
        } catch (e) {
          reject(e);
        }
      });
    },
  },
};
</script>
<style lang="less"></style>
